<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-自定义js框架</title>
    <!--引入自定义的js框架:01-自定义js框架-->
    <script src="./js/01-自定义js框架.js"></script>


</head>
<body>
    <div id="div1">标签体为div1...</div>
    <div id="div2">标签体为div2...</div>

    <script>
        //1.原生js获取元素对象
        /*根据id获取元素对象
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        //获取标签体内容
        alert(div1.innerHTML);
        alert(div2.innerHTML);
        */

        /*2.抽取代码，封装方法，来获取元素对象
        //上述通过id获取元素的方法太长，下面将该代码进行封装,抽取代码，简化封装
        function $(id) {
            var obj = document.getElementById(id);
            return obj;
        }
        var div1 = $("div1");
        var div2 = $("div2");
        alert(div1.innerHTML);
        alert(div2.innerHTML);
        */

        //3.自定义js框架，来获取元素对象。(即将封装的方法放入js文件中来调用)
        var div1 = $("div1");
        var div2 = $("div2");
        alert(div1.innerHTML);
        alert(div2.innerHTML);
    </script>
</body>
</html>